<template>
  <view :class="theme">
    <view v-if="cards.list.length" style="margin: 30rpx 0 calc(150rpx + env(safe-area-inset-bottom));">
      <view @click="checkedItem(index)" v-for="(card, index) in cards.list" :key="card.id"
        class="mb-40 p-40 br-20 color-2 bg-13">
        <view class="fd-row">
          <text class="f1">{{ card.id_name }}</text>
        </view>
        <text class="mt-30">{{ card.card_no }}</text>
      </view>
    </view>

    <view v-else class="mt-30 mb-30 ai-center">
      <u-image :showLoading="false" width="400" height="400" class="mt-60 mb-30" src="/static/img/blank.png" />
      <u-loadmore :status="cards.status" />
    </view>

    <view class="fixed bottom-0 jc-sb bg-2"
      style="padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; left: var(--window-left); right: var(--window-right);">
      <navigator url="/pages/client/main/addCard" hover-class="tap-hover" style="margin: 30rpx; line-height: 88rpx;"
        class="bg-6 br-10 color-2 text-center fs-32">
        添加银行卡
      </navigator>
    </view>
  </view>
</template>

<script lang="ts" setup>

import { useMapState } from "@/common/libs/store";
import { onLoad, onNavigationBarButtonTap, onShow } from "@dcloudio/uni-app";
import { reactive } from "vue";
import { useStore } from "vuex";

const { theme } = useMapState(["theme"]);
const cards = reactive({
  list: [] as AnyObject[],
  status: "nomore",
});
const store = useStore();

let enabledSelectCard = false;
onLoad(({ enabled_select_card = 0 }: any) => {
  enabledSelectCard = !!+enabled_select_card;
});

const checkedItem = (index: number) => {
  if (!enabledSelectCard) return;
  store.commit("setState", { key: "card", value: cards.list[index] });
  uni.navigateBack();
}

onNavigationBarButtonTap(() => {
  uni.navigateTo({ url: "/pages/client/main/addCard" });
});

onShow(() => {
  cards.status = "loading";
  uni.request({
    url: "/bankLists",
    success({ data }: any) {
      cards.list = data;
      cards.status = "nomore"
    }
  })
});

const removeItem = (index: number) => {
  uni.showModal({
    title: "温馨提示",
    content: "确定要解绑该银行卡吗？",
    success({ confirm }) {
      const { id } = cards.list[index];
      confirm && uni.request({
        url: "",
        data: { id },
        success() {
          cards.list.splice(index, 1);
          store.state.card.id === id &&
            store.commit("setState", { key: "card", value: {} })
        }
      })
    }
  })
}
</script>

<style lang="scss" scoped>
// scss
.dark,
.light {
  padding: 20rpx 38rpx;
}
</style>